<template>
  <div> 
    <mt-header fixed title="实名认证">
      <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
    </mt-header>
    <div style="height:40px;"></div>   
    <mt-navbar class="navbar-normal" v-model="selected">
      <mt-tab-item id="1">身份证认证</mt-tab-item>
      <mt-tab-item id="2">其他证件认证</mt-tab-item>
    </mt-navbar>
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <div class="mt10">
          <mt-field label="身份证号码" placeholder="请输入证件号码" type="text" v-model="obj.certNumb"></mt-field>
          <mt-field label="姓名" placeholder="请输入姓名" :attr="{ maxlength:10}" type="text" v-model="obj.realName"></mt-field>
          <mt-field label="性别" placeholder="请选择性别" readonly type="text" @click.native="popSex = true" v-model="obj.sex"></mt-field>
          <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="obj.mobile"></mt-field> 
          <mt-field label="参赛证件照" placeholder="" type="" v-model="obj.photo">
            <div style="display: flex; margin: 10px 0; align-items: center; float: left;">
              <img style="width:120px; flex:1; margin-right: 10px;" ref='img1' src="@/assets/img/default2.png">
              <mt-button type="primary" @click="fileSel" plain size="small">选择证件照</mt-button>
            </div>
          </mt-field>
        </div>
        <div style="display: flex; margin: 20px 10px;"><mt-button style="flex:1;" type="primary">确定提交</mt-button></div>
      </mt-tab-container-item>

      <mt-tab-container-item id="2">
        <div class="mt10">
          <mt-field label="证件类型" placeholder="请选择证件类型" v-model="obj.certType"></mt-field>
          <mt-field label="证件号码" placeholder="请输入证件号码" :attr="{ maxlength:20}" type="text" v-model="obj.certNumb"></mt-field>
          <mt-field label="姓名" placeholder="请输入姓名" :attr="{ maxlength:10}" type="text" v-model="obj.realName"></mt-field>
          <mt-field label="性别" placeholder="请选择性别" readonly type="text" @click.native="popSex = true" v-model="obj.sex"></mt-field>
          <mt-field label="出生日期" placeholder="请输入出生日期" type="date" v-model="obj.birthday"></mt-field>
          <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="obj.mobile"></mt-field>
          <mt-field label="参赛证件照" placeholder="" type="" v-model="obj.photo">
            <div style="display: flex; margin: 10px 0; align-items: center; float: left;">
              <img style="width:120px; flex:1; margin-right: 10px;" ref='img2' src="@/assets/img/default2.png">
              <mt-button type="primary" @click="fileSel" plain size="small">选择证件照</mt-button>
            </div>
          </mt-field>
        </div>

        <div style="display: flex; margin: 20px 10px;"><mt-button style="flex:1;" type="primary">确定提交</mt-button></div>
      </mt-tab-container-item>
    </mt-tab-container>


    <input type="file" ref="file" @change='selPic' accept="image/*" style="display:none;">
    <!-- 弹出框 --> 
    <mt-popup v-model="popSex" style="width:80%;">
      <mt-radio title="请选择性别" v-model="obj.sex" align="right" :options="['男', '女']"></mt-radio>
    </mt-popup>

  </div>
</template>

<script>

function trigger(ele,type){
  var myEvent = document.createEvent('MouseEvents');
  myEvent.initEvent(event, true, true);
  ele.dispatchEvent(myEvent);
}

export default { 
  data () {
    return {     
      selected:"1",
      obj:{},
      popSex:false
    }
  },
  mounted(){
    
  },
  methods:{
    fileSel(){
      this.$refs.file.click();
    },
    selPic(){
      var files = this.$refs.file.files[0];                  //获取文件信息
      var img1 = this.$refs.img1;
      var img2 = this.$refs.img2;
      if(files){ 
          var reader=new FileReader();                       //调用FileReader
          reader.onload=function(evt){                        //读取操作完成时触发。
            img1.setAttribute('src',evt.target.result);    //将img标签的src绑定为DataURL
            img2.setAttribute('src',evt.target.result);    //将img标签的src绑定为DataURL
          }
          reader.readAsDataURL(files);                        //将文件读取为 DataURL(base64)
      }else{
        
      }
    }
  }
}

</script>
